<template>
    <div class="content">
        <div class="inputDom">
            <el-input v-model="input" placeholder="请输入充值金额：" />
            <el-button type="success" @click="MakeQrcode">生成二维码</el-button>
        </div>
        <div class="qrcode" ref="qrcodeDom">

        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, nextTick } from 'vue'
import QRcode from "qrcodejs2";
const input = ref('')

let qrcodeDom = ref(null)

let MakeQrcode = () => {
    qrcodeDom.value.innerHTML=""
    nextTick(() => {
        new QRcode(qrcodeDom.value, {
            //生成二维码的内容
            text: input.value,
            //二维码的颜色
            colorDark: "#000",
            //二维码的背景色
            colorLight: "#fff",
            //水平位置的调整
            // correctLevel:QRcode.CorrectLEvel.H
        })
    })
}
</script>

<style lang='scss' scoped>
.qrcode {
    width: 3.75rem;
    height: 3.75rem;
    margin: 0 auto;
}
.inputDom{
    width: 5rem;
    margin: 0 auto;
}
.content{
    text-align: center;
}
</style>